<script lang="ts" setup>
const props = defineProps({
  msg: {
    type: Object,
    required: true,
  },
  top: {
    type: String,
    default: "50%",
  },
  duration: {
    type: Number,
    default: 3000,
  },
});
watch(
  () => props.msg,
  (newVal, oldVal) => {
    if (newVal.show) {
      setTimeout(() => {
        props.msg.show = false;
      }, props.duration);
    }
  }
);
</script>
<template>
  <transition name="fade">
    <div
      v-show="msg.show"
      class="msgBox"
      :class="{
        'border-#fde2e2 bg-red-50 text-#f56c6c': !msg.valid,
        'border-green-800 bg-green-50 text-green-500': msg.valid,
      }"
    >
      <S-icon :icon="msg.valid ? 'ep:success-filled' : 'ix:error-filled'" />
      <div class="whitespace-nowrap">{{ msg.content }}</div>
      <S-icon
        v-if="msg.closeable"
        class="c-#a8abb2 cursor-pointer"
        icon="material-symbols:close-rounded"
        @click="msg.show = false"
      />
    </div>
  </transition>
</template>
<style scoped>
.msgBox {
  font-size: 14px;
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  top: v-bind(props.top);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  border-radius: 4px;
}

.fade-leave-from,
.fade-enter-to {
  opacity: 1;
}
.fade-leave-to,
.fade-enter-from {
  opacity: 0;
}
/* 定义过渡的持续时间和动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
</style>
